<template>
    <div style="width:100%;">
        <div style="padding: 50px">
            <template>
                <el-tabs v-model="active_card" type="card">
                    <el-tab-pane label="床位调换" name="first">
                        <el-row style="margin-bottom: 30px">
                            <el-col :span="12">
                                <div>
                                    <el-form :inline="true" class="demo-form-inline" style="height: 30px"
                                             :model="first_card.key_data"
                                             ref="customer_left" :rules="first_card.search_key_left_rules">
                                        <el-form-item prop="search_key_left">
                                            <el-input v-model="first_card.key_data.search_key_left" style="width: 270px"
                                                      size="small"
                                                      placeholder="请输入老人【编号】或【档案号】信息">
                                            </el-input>
                                        </el-form-item>
                                        <el-form-item>
                                            <el-button type="primary" @click="search_customer('customer_left',1,true)"
                                                       size="small">查询
                                            </el-button>
                                        </el-form-item>
                                    </el-form>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div>

                                </div>
                            </el-col>
                        </el-row>
                        <el-form style="height: 30px" :model="first_card.new_bed_detail"
                                 ref="new_bed_detail_form" :rules="first_card.new_bed_detail_rules"
                                 label-width="100px"
                        >
                            <el-divider></el-divider>
                            <el-row>
                                <el-col :span="7">
                                    <div>
                                        <label>老人姓名：</label>
                                    </div>
                                </el-col>
                                <el-col :span="5">
                                    <div style="float: left">
                                        <label>{{first_card.customer_detail.name}}</label>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div>

                                    </div>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="7">
                                    <div style="margin-top:40px;">
                                        <label>楼栋号：</label>
                                    </div>
                                </el-col>
                                <el-col :span="5">
                                    <div style="margin-top:43px;float: left">
                                        <label>{{first_card.customer_detail.building_number}}</label>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div style="margin-top:40px;">
                                        <el-form-item prop="building_number" label="新楼栋号：">
                                            <el-input v-model="first_card.new_bed_detail.building_number"
                                                      size="small"
                                                      placeholder="请输入【新楼栋号】信息"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-divider></el-divider>
                            <el-row>
                                <el-col :span="7">
                                    <div style="margin-top:10px;">
                                        <label>房间号：</label>
                                    </div>
                                </el-col>
                                <el-col :span="5">
                                    <div style="margin-top:13px;float: left">
                                        <label>{{first_card.customer_detail.room_number}}</label>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div>
                                        <el-form-item prop="room_number" label="新房间号：">
                                            <el-input v-model="first_card.new_bed_detail.room_number"
                                                      size="small"
                                                      placeholder="请输入【新房间号】信息"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-divider></el-divider>
                            <el-row>
                                <el-col :span="7">
                                    <div style="margin-top:10px;">
                                        <label>床位号：</label>
                                    </div>
                                </el-col>
                                <el-col :span="5">
                                    <div style="margin-top:13px;float: left">
                                        <label>{{first_card.customer_detail.bed_number}}</label>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div>
                                        <el-form-item prop="bed_number" label="新床位号：">
                                            <el-input v-model="first_card.new_bed_detail.bed_number"
                                                      size="small"
                                                      placeholder="请输入【新床位号】信息"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="7">
                                    <div style="margin-top:10px;">
                                    </div>
                                </el-col>
                                <el-col :span="5">
                                    <div style="margin-top:13px;">
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div>
                                        <el-form-item>
                                            <el-button type="primary" @click="change_bed('new_bed_detail_form')"
                                                       size="small">修改
                                            </el-button>
                                        </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-form>
                        <el-divider></el-divider>
                    </el-tab-pane>


                    <el-tab-pane label="床位对调" name="second">
                        <el-row style="margin-bottom: 30px">
                            <el-col :span="12">
                                <div>
                                    <el-form :inline="true" class="demo-form-inline" style="height: 30px"
                                             :model="second_card.left_data"
                                             ref="customer_exchange_left" :rules="second_card.search_key_left_rules">
                                        <el-form-item prop="_search_key_left">
                                            <el-input v-model="second_card.left_data.search_key_left"
                                                      style="width: 270px"
                                                      size="small"
                                                      placeholder="请输入老人【编号】或【档案号】信息"></el-input>
                                        </el-form-item>
                                        <el-form-item>
                                            <el-button type="primary"
                                                       @click="search_customer('customer_exchange_left',2,true)"
                                                       size="small">查询
                                            </el-button>
                                        </el-form-item>
                                    </el-form>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div>
                                    <el-form :inline="true" class="demo-form-inline" style="height: 30px"
                                             :model="second_card.right_data"
                                             ref="customer_exchange_right" :rules="second_card.search_key_right_rules">
                                        <el-form-item prop="search_key_right">
                                            <el-input v-model="second_card.right_data.search_key_right"
                                                      style="width: 270px"
                                                      size="small"
                                                      placeholder="请输入老人【编号】或【档案号】信息"></el-input>
                                        </el-form-item>
                                        <el-form-item>
                                            <el-button type="primary"
                                                       @click="search_customer('customer_exchange_right',3,true)"
                                                       size="small">查询
                                            </el-button>
                                        </el-form-item>
                                    </el-form>
                                </div>
                            </el-col>
                        </el-row>

                        <el-divider></el-divider>
                        <el-row>
                            <el-col :span="7">
                                <div>
                                    <label>老人姓名：</label>
                                </div>
                            </el-col>
                            <el-col :span="5">
                                <div style="float: left;margin-top: 1px">
                                    <label>{{second_card.customer_left_detail.name}}</label>
                                </div>
                            </el-col>
                            <el-col :span="7">
                                <div>
                                    <label>老人姓名：</label>
                                </div>
                            </el-col>
                            <el-col :span="5">
                                <div style="float: left">
                                    <label>{{second_card.customer_right_detail.name}}</label>
                                </div>
                            </el-col>
                        </el-row>
                        <el-divider></el-divider>
                        <el-row>
                            <el-col :span="7">
                                <div style="margin-top:10px;">
                                    <label>楼栋号：</label>
                                </div>
                            </el-col>
                            <el-col :span="5">
                                <div style="margin-top:13px;float: left">
                                    <label>{{second_card.customer_left_detail.building_number}}</label>
                                </div>
                            </el-col>
                            <el-col :span="7">
                                <div style="margin-top:10px;">
                                    <label>楼栋号：</label>
                                </div>
                            </el-col>
                            <el-col :span="5">
                                <div style="margin-top:13px;float: left">
                                    <label>{{second_card.customer_right_detail.building_number}}</label>
                                </div>
                            </el-col>
                        </el-row>
                        <el-divider></el-divider>
                        <el-row>
                            <el-col :span="7">
                                <div style="margin-top:10px;">
                                    <label>房间号：</label>
                                </div>
                            </el-col>
                            <el-col :span="5">
                                <div style="margin-top:13px;float: left">
                                    <label>{{second_card.customer_left_detail.room_number}}</label>
                                </div>
                            </el-col>
                            <el-col :span="7">
                                <div style="margin-top:10px;">
                                    <label>房间号：</label>
                                </div>
                            </el-col>
                            <el-col :span="5">
                                <div style="margin-top:13px;float: left">
                                    <label>{{second_card.customer_right_detail.room_number}}</label>
                                </div>
                            </el-col>
                        </el-row>
                        <el-divider></el-divider>
                        <el-row>
                            <el-col :span="7">
                                <div style="margin-top:10px;">
                                    <label>床位号：</label>
                                </div>
                            </el-col>
                            <el-col :span="5">
                                <div style="margin-top:13px;float: left">
                                    <label>{{second_card.customer_left_detail.bed_number}}</label>
                                </div>
                            </el-col>
                            <el-col :span="7">
                                <div style="margin-top:10px;">
                                    <label>床位号：</label>
                                </div>
                            </el-col>
                            <el-col :span="5">
                                <div style="margin-top:13px;float: left">
                                    <label>{{second_card.customer_right_detail.bed_number}}</label>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="7">
                                <div style="margin-top:10px;">
                                </div>
                            </el-col>
                            <el-col :span="5">
                                <div style="margin-top:13px;">
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div>
                                    <el-button size="small" type="primary" @click="exchange_bed">对调床位</el-button>
                                </div>
                            </el-col>
                        </el-row>
                        <el-divider></el-divider>
                    </el-tab-pane>
                </el-tabs>
            </template>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import qs from 'qs'

    export default {
        name: "choosebed",
        mounted() {
            this.$data.active_card = "first";
        },
        data() {
            return {
                active_card: '',
                first_card: {
                    key_data: {
                        search_key_left: '',
                    },
                    search_key_left_rules: {
                        search_key_left: [{required: true, message: '请输入信息！', trigger: 'blur'}],
                    },
                    customer_detail: {
                        id: '',
                        name: '',
                        building_number: '',
                        room_number: '',
                        bed_number: '',
                    },
                    new_bed_detail: {
                        building_number: '',
                        room_number: '',
                        bed_number: '',
                    },
                    new_bed_detail_rules: {
                        building_number: [{required: false, message: '请输入楼栋号！', trigger: 'blur'}],
                        room_number: [{required: false, message: '请输入房间号！', trigger: 'blur'}],
                        bed_number: [{required: true, message: '请输入床位号！', trigger: 'blur'}],
                    },
                },
                second_card: {
                    left_data: {
                        search_key_left: '',
                    },
                    search_key_left_rules: {
                        search_key_left: [{required: true, message: '请输入信息！', trigger: 'blur'}],
                    },
                    right_data: {
                        search_key_right: '',
                    },
                    search_key_right_rules: {
                        search_key_right: [{required: true, message: '请输入信息！', trigger: 'blur'}],
                    },
                    customer_left_detail: {
                        id: '',
                        name: '',
                        building_number: '',
                        room_number: '',
                        bed_number: '',
                    },
                    customer_right_detail: {
                        id: '',
                        name: '',
                        building_number: '',
                        room_number: '',
                        bed_number: '',
                    },
                }
            }
        },
        methods: {
            change_bed(form_name) {
                if (this.$data.first_card.customer_detail.id === '') {
                    this.$message({
                        type: 'warning',
                        message: '请先输入老人信息！',
                    });
                } else {
                    this.$refs[form_name].validate((valid) => {
                        if (valid) {
                            this.$confirm('是否确认进行修改?', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => {
                                let obj = {
                                    'id': this.$data.first_card.customer_detail.id,
                                    'building_number': this.$data.first_card.new_bed_detail.building_number,
                                    'room_number': this.$data.first_card.new_bed_detail.room_number,
                                    'bed_number': this.$data.first_card.new_bed_detail.bed_number,
                                };
                                axios({
                                    method: 'post',
                                    url: '/api/choose_bed_page/change_bed',
                                    data: qs.stringify(obj),
                                }).then(res => {
                                    if (res.data.rs === true) {
                                        this.$message({
                                            type: 'success',
                                            message: '修改成功!',
                                        });
                                        this.search_customer('customer_left', 1, false);
                                    } else {
                                        this.$message({
                                            type: 'error',
                                            message: '修改失败：' + res.data.errMsg,
                                        });
                                    }
                                });
                            }).catch(() => {
                                this.$message({
                                    type: 'info',
                                    message: '已取消修改'
                                });
                            });
                        } else {
                            return false;
                        }
                    });
                }
            },
            search_customer(form_name, flag, do_show_message) {
                this.$refs[form_name].validate((valid) => {
                    if (valid) {
                        let str;
                        switch (flag) {
                            case 2:
                                str = this.$data.second_card.left_data.search_key_left;
                                break;
                            case 3:
                                str = this.$data.second_card.right_data.search_key_right;
                                break;
                            default:
                            case 1:
                                str = this.$data.first_card.key_data.search_key_left;
                                break;
                        }
                        axios({
                            method: 'post',
                            url: '/api/choose_bed_page/find_customer',
                            data: qs.stringify({'search_key': str}),
                        }).then(res => {
                            if (res.data.rs === true) {
                                if (do_show_message) {
                                    this.$message({
                                        type: 'success',
                                        message: '搜索成功!',
                                    });
                                }
                                switch (flag) {
                                    case 2:
                                        this.$data.second_card.customer_left_detail = res.data.data;
                                        break;
                                    case 3:
                                        this.$data.second_card.customer_right_detail = res.data.data;
                                        break;
                                    default:
                                    case 1:
                                        this.$data.first_card.customer_detail = res.data.data;
                                        break;
                                }
                            } else {
                                if (do_show_message) {
                                    this.$message({
                                        type: 'error',
                                        message: '搜索失败：' + res.data.errMsg,
                                    });
                                }
                            }
                        });

                    } else {
                        return false;
                    }
                });
            },
            exchange_bed() {
                if (this.$data.second_card.customer_left_detail.id === '' || this.$data.second_card.customer_right_detail === '') {
                    this.$message({
                        type: 'warning',
                        message: '请先输入老人信息！',
                    });
                } else {
                    this.$confirm('是否确认进行对调?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let obj = {
                            'id1': this.$data.second_card.customer_left_detail.id,
                            'id2': this.$data.second_card.customer_right_detail.id,
                        };
                        axios({
                            method: 'post',
                            url: '/api/choose_bed_page/exchange_bed',
                            data: qs.stringify(obj),
                        }).then(res => {
                            if (res.data.rs === true) {
                                this.$message({
                                    type: 'success',
                                    message: '对调成功!',
                                });
                                this.search_customer('customer_exchange_left', 2, false);
                                this.search_customer('customer_exchange_right', 3, false);
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: '对调失败：' + res.data.errMsg,
                                });
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消修改'
                        });
                    });
                }
            }
        },
    }
</script>

<style scoped>

    .label_key {

    }

    .label_value {

    }
</style>